import React, { Component } from 'react'
import './index.css'
export default class Header extends Component {
    /**
     * on事件名  keyup   onKeyUp
     */
    // 方式二：
    inputRef = React.createRef();
    // 方式三：
    state = {
        keyword:''
    }
    keyupHandler(e){
        // if(e.keyCode === 13){
        if(e.code === 'Enter'){
            // 获取输入内容
            // 方式一：
            console.log(e.target.value);
            // 方式二：通过ref
            console.log(this.inputRef.current.value);
            // 方式三：
            console.log(this.state.keyword);
        }
    }

    // 方式三：change
    change(e){
        this.setState({
            keyword:e.target.value
        })
    }
    render() {
        return (
            <div className="todo-header">
                <input ref={this.inputRef} type="text" placeholder="请输入你的任务名称，按回车键确认" value={this.state.keyword} onKeyUp={this.keyupHandler.bind(this)} onChange={this.change.bind(this)}/>
            </div>
        )
    }
}
